<template>
  <div>
    <h2><slot></slot></h2>

    <button @click="myIncrement">Increment</button>
    <button @click="myIncrementWithStep(7)">Increment with step</button>
    <button @click="increment">Increment</button>
    <button @click="incrementWithStep(7)">Increment with step</button>
    <button @click="increment2">Increment</button>
    <button @click="incrementWithStep2(7)">Increment with step</button>
  </div>
</template>

<script>
import { mapMutations } from 'vuex'

export default {
  name: 'Mutations2',
  methods: {
    // mutations → 组件的 methods
    myIncrement() {
      this.$store.commit('increment')
    },
    myIncrementWithStep(step) {
      this.$store.commit('incrementWithStep', step)
    },

    // mapMutations
    ...mapMutations(['increment', 'incrementWithStep']),

    // mapMutations 重命名
    ...mapMutations({
      increment2: 'increment',
      incrementWithStep2: 'incrementWithStep'
    })
  }
}
</script>
